<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			/* .mui-search.mui-active:before {
			    margin-top: -13px;
			}
			input[type='search']{
				border-radius: 2px;
			}
			.xq-fixed-to-header{
				height: 40px;
			} */
			.mui-scroll-wrapper{
				margin-top: 90px;
			}
			.fixed-next-header{
				position: fixed;
				top: 44px;
				left: 0;
				right: 0;
				height: 45px;
				background-color: white;
				box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
				line-height: 45px;
				padding-left: 1rem;
			}
			.xq-circle-img {
			    width: 42px;
			    height: 42px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">作者列表</h1>
		</header>
		<div class="mui-content">
			<!-- <div class="mui-input-row mui-search xq-fixed-to-header" id='writer-search-content'>
			    <input type="search" class="mui-input-clear" placeholder="搜索作者">
			</div> -->
			<div class="fixed-next-header" id='pop-filter-panel'>
				<span class="mui-btn-link">点击筛选</span> :<span id="filter-words-show"></span>
			</div>
			
			<div id='xq-writer-result-scroll-wrapper' class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul id='writer-result-list-ul' class="mui-table-view" v-cloak>
						<li v-for="(itemInfo,index) in writerList" class="mui-table-view-cell" :info-id="itemInfo.id" :index="index">
							<a>
								<img class="mui-media-object mui-pull-left xq-circle-img" :src="itemInfo.headImageUrl" />
								<div class="mui-media-body">
									<div class="xq-media-body-title-line">
										<div class="left-title">{{itemInfo.name}}</div>
										<div class="right-title">{{itemInfo.dynasty}}</div>
									</div>
									<div class="mui-ellipsis xq-media-body-sub-detail">{{itemInfo.simpleIntro}}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			
		</div>
		<div class="mui-input-group xq-fixed-to-header init-hidden-to-top" id="filter-panel-content">
			<div class="mui-input-row">
				<label>朝代</label>
				<input type="text" class="mui-input-clear" v-model="dynasty" placeholder="朝代">
			</div>
			<div class="mui-input-row">
				<label>姓名</label>
				<input type="text" class="mui-input-clear" v-model="name" placeholder="作者姓名">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary func-confirm-btn">确认</button>
				<button type="button" class="mui-btn mui-btn-danger func-cancel-btn">取消</button>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/shiwenListLoader.js"></script>
		<script src="../js/writerListLoader.js"></script>
		<script src="../js/allWriterListPageManager.js"></script>
		<script type="text/javascript">
			mui.init();
			//
			mui.ready(function(){
				if (mui.os.plus) {
					return;
				}
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("allWriterList");
				SettingInfoManager.setPageFontFromSetting();
				// 搜索事件,获取搜索关键词
				var allWriterListPageManager=new AllWriterListPageManager();
				allWriterListPageManager.init({});
			})
			
			mui.plusReady(function(){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("allWriterList");
				SettingInfoManager.setPageFontFromSetting();
				var allWriterListPageManager=new AllWriterListPageManager();
				allWriterListPageManager.init({});
			});
			
		</script>
	</body>

</html>
